 <script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<template >
     <div id="app1" >
          <div>
               <el-header  >
                    <span class="span1" >学生列表</span>
                    <p class="right return" id="" @click="backed">首页>学生列表</p>
               </el-header>
               <div class="headButton" >
                    <el-button type="primary" @click="del">选择删除</el-button>
                    <el-button type="success" @click="getData()" >刷新</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                   <!-- 搜索框 -->
                   <div>          
                         <el-input placeholder="请输入内容" v-model="input" class="input-with-select" >
                             <el-select v-model="select" slot="prepend"  placeholder="请选择"  >
                                   <el-option label="班级" value="1"></el-option>
                                   <el-option label="姓名" value="2"></el-option>
                                   <el-option label="学号" value="3"></el-option>
                              </el-select>
                              <el-button slot="append" icon="el-icon-search" v-if="this.select =='1'" @click="searchClass() "></el-button>
                              <el-button slot="append" icon="el-icon-search" v-else-if="this.select =='2'" @click="searchName() "></el-button>
                              <el-button slot="append" icon="el-icon-search" v-else-if="this.select =='3'" @click="searchId() "></el-button>
                         </el-input>
                    </div>
               </div>
               <!--表格  -->
               <el-container >
                    <el-table
                         ref="multipleTable"
                         :data="tableData"
                         tooltip-effect="dark"
                         style="width: 100%"
                         @selection-change="handleSelectionChange"
                         >
                         <el-table-column
                              type="selection"
                              width="55">
                         </el-table-column>
                         <el-table-column
                              prop="name"
                              label="姓名"
                              width="120">
                         </el-table-column>
                         <el-table-column
                              prop="className"
                              label="班级"
                              show-overflow-tooltip>
                         </el-table-column>
                             <el-table-column
                              prop="sex"
                              label="性别"
                              show-overflow-tooltip>
                         </el-table-column>
                          <el-table-column
                              prop="studentId"
                              label="学号"
                              show-overflow-tooltip>
                         </el-table-column>
                           <el-table-column
                              prop="parentPhone"
                              label="联系电话"
                              show-overflow-tooltip>
                         </el-table-column>
                           <el-table-column
                              prop="email"
                              label="邮箱地址"
                              show-overflow-tooltip>
                         </el-table-column>
                         <el-table-column
                              prop="admissionDate"
                              label="入学日期"
                              show-overflow-tooltip>
                         </el-table-column>
                          <el-table-column  label="操作" width="150">
                                   <el-row slot-scope="scope">
                                        <el-button size="mini"  @click="dialogFormVisible = true,edit(scope.$index,scope.row)" >编辑</el-button>
                                        <el-button size="mini" @click="del1(scope.$index,scope.row)" >删除</el-button>
                                   </el-row>
                              </el-table-column>
                         </el-table>
               </el-container>
               <!-- 修改弹框 -->
               <el-dialog title="修改" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                         <el-form-item label="姓名" :label-width="formLabelWidth" >
                              <el-input v-model="form.name" autocomplete="off" disabled></el-input>
                         </el-form-item>
                         <el-form-item label="班级" :label-width="formLabelWidth" >
                              <el-select v-model="form.className" placeholder="请选择班级">
                              <el-option label="高三1班" value="1"></el-option>
                              <el-option label="高三2班" value="2"></el-option>
                              </el-select>
                         </el-form-item>
                         <el-form-item label="性别" :label-width="formLabelWidth" >
                              <el-select v-model="form.sex" placeholder="请选择性别">
                              <el-option label="男" value="nan"></el-option>
                              <el-option label="女" value="nv"></el-option>
                              </el-select>
                         </el-form-item>
                         <el-form-item label="学号" :label-width="formLabelWidth" >
                              <el-input v-model="form.studentId" autocomplete="off" disabled></el-input>
                         </el-form-item>
                         <el-form-item label="联系电话" :label-width="formLabelWidth" >
                              <el-input v-model="form.parentPhone" autocomplete="off" ></el-input>
                         </el-form-item>
                          <el-form-item label="邮箱地址" :label-width="formLabelWidth">
                              <el-input v-model="form.email" autocomplete="off"></el-input>
                         </el-form-item>
                          <el-form-item label="入学时间" :label-width="formLabelWidth" >
                              <el-input v-model="form.admissionDate" autocomplete="off" disabled></el-input>
                         </el-form-item>
                    </el-form>
               <div slot="footer" class="dialog-footer">

               <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="dialogFormVisible = false,confirm() ">确 定</el-button>
               </div>
               </el-dialog>

               <!--分页-->
               <el-pagination :page-size="9"
               style="float:right"
                :pager-count="5" layout="prev, pager, next" @current-change="handleCurrentChange" :total="total">
               </el-pagination>
               <!--page-size:每页显示条目个数
                    pager-count：页码按钮的数量，当总页数超过该值时会折叠
                    total	总条目数
               -->
          </div>    
     </div>
</template>
 <script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<script>
   export default {
     data() {
          return {
               //数据
               tableData:[
                    {    id:'',
                         name:'',
                         email:'',
                         parentPhone:'',
                         classid:'',
                         sex:'',
                         className:'',
                         admissionDate:'',
                         studentId:'',
                         image:''
                    }
               ],
               //编辑弹框的数据
               form: {
                    id:'',
                    name:'',
                    email:'',
                    parentPhone:'',
                    classid:'',
                    sex:'',
                    className:'',
                    admissionDate:'',
                    studentId:'',
                    image:'',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
               },
               dialogFormVisible: false,
               multipleSelection: [],
               formLabelWidth: '120px',
               total:null,//总条数
               currentPage:1,
               input:'',
               select:'1',
               data:'',//点击编辑时的数据
          }
     },
     methods: {
               toggleSelection(rows) {
                    if (rows) {
                         rows.forEach(row => {
                         this.$refs.multipleTable.toggleRowSelection(row);
                         });
                    } else {
                         this.$refs.multipleTable.clearSelection();
                    }
               },
               handleSelectionChange(val) {
                   this.multipleSelection = val;
                    this.multipleSelection=[];
                    val.forEach(item=>{
                  this.multipleSelection.push(item.id);
                  //把所有的id放进multipleSelection
                })
               },
               handleCurrentChange: function (currentPage){  
                    this.currentPage=currentPage;
                    if(this.select==2){
                          this.searchName()
                    }else if(this.select==1){
                          this.searchClass();
                    } else if(this.select==3){
                          this.searchId();
                    }else{
                         this.getData();
                    }
               },
               //列表中编辑按钮加事件
               edit(index,row){
                    this.form.id=row.id,
                    this.form.name=row.name,
                    this.form.email=row.email,
                    this.form.parentPhone=row.parentPhone,
                    this.form.classidId=row.classidId,
                    this.form.sex=row.sex,
                    this.form.className=row.className,
                    this.form.admissionDate=row.admissionDate
                    this.form.studentId=row.studentId,
                    this.form.image=row.image     
               },
                   //返回首页
            backed(){
                    this.$router.push({path: '/index'})
            },
    
               //成功
                 open2(){
                    this.$message({
                         message: '恭喜你，操作成功',
                         type: 'success'
                    });
               },
               //失败
               open4() {
                    this.$message.error('操作失败');
               },
               //编辑框确定按钮点击事件
               confirm(){
                    var sex=0;
                    if(this.form.sex=='男'){
                         sex=1
                    }
                    this.$axios({
                         url:"/student/update",
                         method:'post',
                         data:{
                              "address" :this.form.address,//地址
                              "admissionDate" : this.form.admissionDate,//入校时间
                              "birthday" :this.form.admissionDate,//生日
                              "className" :this.form.className,//班级
                              "classid" :  this.form.classid,//班级号
                              "studentId":this.form.studentId,//学号
                              "email" :this.form.email,//电子邮件
                              "id": this.form.id,//id
                              "image" : this.form.image,//图片地址
                              "name" :this.form.name,//名字
                              "parentName" :this.form.parentName,//父母名字
                              "parentPhone":this.form.parentPhone,//父母电话
                              "sex":sex   //性别
                         }
                         }).then(res=>{
                         //重新渲染
                         this.getData()
                         this.open2()
                    })
                    .catch(error=>{
                         this.open4()
                         console.log(error,2);
                    });
               },
               //input框查询
               //根据班级查询
               searchClass(){
                    this.$axios({
                              url:"/student/findStudentByWhere",
                              method:'post',
                               params:{
                                   type:'className',
                                   value:this.input,
                                   page:this.currentPage,
                                   limit:10,     
                              }
                    }).then(res=>{
                          //查询到的数据 
                         this.tableData=[]
                         this.total=res.data.data.total
                         this.Render(res.data.data.list)
                    }) 
                    .catch(error=>{
                         this.open4()
                         console.log(error,2);
                    });       
               },
               //根据学生姓名查询
               searchName(){
                    this.$axios({
                         url:"/student/findStudentByWhere",
                         method:'post',
                         params:{
                              type:'name',
                              value:this.input,
                              page:this.currentPage,
                              limit:10,     
                         }
                    }).then(res=>{
                         //查询到的数据 
                         this.tableData=[]
                         this.total=res.data.data.total
                         this.Render(res.data.data.list)
                    })
                    .catch(error=>{
                         this.open4()
                         console.log(error,2);
                    });
               },
               //根据学生学号查询
               searchId(){
                     this.multipleSelection=[this.input];
                    this.$axios({
                              url:"/student/findStudentByStudentId",
                              method:'post',
                             params:{
                                   studentId:this.input,
                                   page:this.currentPage,
                                   limit:10,    
                            }
                    }).then(res=>{
                         //查询到的数据 
                         this.tableData=[]
                         this.total=res.data.data.total
                         this.Render(res.data.data.list)
                         this.open2()
                    })
                    .catch(error=>{
                         this.open4()
                         console.log(error,2);
                    });
               },
               //删除选中的
               del(){
                    this.$axios({
                              url:"/student/deleteStudentById",
                              method:'post',
                              data:{ids:this.multipleSelection}
                    }).then(res=>{
                         if(this.select==2){
                              this.searchName()
                         }else if(this.select==1){
                              this.searchClass();
                         } else if(this.select==3){
                              this.searchId();
                         }else{
                              this.getData();
                               this.open2()
                         }
                        
                    })
                    .catch(error=>{
                         this.open4()
                         console.log(error,2);
                    });
               },
               //删除
               del1(index,row){
                    this.multipleSelection=[row.id];
                    this.$axios({
                              url:"/student/deleteStudentById",
                              method:'post',
                            data:{ids:this.multipleSelection}
                    }).then(res=>{
                         if(this.select==2){
                              this.searchName()
                         }else if(this.select==1){
                              this.searchClass();
                         } else if(this.select==3){
                              this.searchId();
                         }else{
                              this.getData();
                         }
                         this.open2()
                    })
                    .catch(error=>{
                         this.open4()
                         console.log(error,2);
                    });
               },
               // 渲染
               Render(Array) {
                    this.tableData=Array;
                    for (var i = 0; i <this.tableData.length; i++) {
                         //判断是男生还是女生
                         if (this.tableData[i].sex) {
                         this.tableData[i].sex = '男'
                         } else {
                              this.tableData[i].sex = '女'
                         }
                         //将时间戳数据转换格式
                         this.tableData[i].admissionDate = this.format(this.tableData[i].admissionDate);
                         this.tableData[i].birthday = this.format(this.tableData[i].birthday);
                    }
               },
               //获取列表数据
               getData: function(){
                    this.$axios({
                         method:'post',
                         url:'/student/findStudentByWhere',
                         params: {
                              page:this.currentPage,
                              limit:'10', 
                         }
                    })
                    .then(response =>{ 
                         console.log(response.data.code)
                         if(response.data.code == 0){
                              this.total=response.data.data.total;
                              this.Render(response.data.data.list)
                         }else{
                              this.$router.push("/noResponse");
                         }
                    })
                    .catch(error=>{
                         this.open4()
                         console.log(error,2);
                    });
               },
               
               //补零规则
               add0(m) {
                    return m < 10 ? '0' + m : m
               },
               //将时间戳转换为日期格式
               format(shijianchuo) {
                    //时间戳是整数，否则要parseInt转换
                    var time = new Date(shijianchuo);
                    var y = time.getFullYear();
                    var m = time.getMonth() + 1;
                    var d = time.getDate();
                    return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ';
               },
     },
    mounted(){
          this.getData()
     },
}
     

</script>

<style scoped lang="less">
@import url("//unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css");
.return {
                color: #333;
                float: right;
                font-size: 18px;
                cursor: pointer;
            }

            .return:hover {
                color: #8cc5ff;
            }
#app1{
     .el-header {
          background-color: #B3C0D1;
          color: #333;
          line-height: 60px;
          margin-bottom: 20px;
          padding: 0;
          font-family: 'Arial Normal', 'Arial';
          font-weight: 400; 
          font-style: normal;
          color: #153C65;
          background:#ffffff;
          margin-top:20px ;

          .span1{
               float: left;
               margin-left: 20px;
          }
          .span2{
               float: right;
               margin-right:30px;
          }
     }
     .headButton{
          margin-bottom:15px;

          div{
               float:right;

               .el-input {
                    .el-select{
                         width:90px;
                    }
               }
          }
     }

}

.el-aside {
color: #333;
}
#app{
 width: 1500px;
    margin: auto;
    background:#F2F2F6;
}
.el-select .el-input {
     width: 130px;
}
.input-with-select .el-input-group__prepend {
     background-color: #fff;
}
</style>
